<!--
  ~ Copyright (c) 2020 the original author or authors
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      https://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  ~ or implied. See the License for the specific language governing
  ~ permissions and limitations under the License.
  -->

<table *ngIf="!isLoading" mat-table [dataSource]="data" fixedLayout="true">
  <caption>
    {{
      'users.caption' | translate
    }}
  </caption>

  <!-- Position Column -->
  <ng-container matColumnDef="user">
    <th mat-header-cell *matHeaderCellDef scope="col">{{ 'users.user' | translate }}</th>
    <td mat-cell *matCellDef="let element">
      <div class="user--name mat-subheading-1">{{ element.firstName }} {{ element.lastName }}</div>
      <div class="user--role mat-body-2">{{ element.role | titlecase }}</div>
    </td>
  </ng-container>
  <ng-container matColumnDef="role">
    <th mat-header-cell *matHeaderCellDef scope="col">{{ 'users.role' | translate }}</th>
    <td mat-cell *matCellDef="let element">
      <button mat-icon-button>
        <mat-icon svgIcon="edit" (click)="onEditAppRole(element)"></mat-icon>
      </button>
    </td>
  </ng-container>
  <ng-container matColumnDef="delete">
    <th mat-header-cell *matHeaderCellDef scope="col"></th>
    <td mat-cell *matCellDef="let element">
      <ng-container
        *ngIf="
          (element.userId === this.currentUserId && element.role !== roleEnum.Owner) ||
            (userRole === roleEnum.Administrator && element.role !== roleEnum.Owner) ||
            (userRole === roleEnum.Owner && element.role !== roleEnum.Owner);
          then active;
          else notActive
        "
      ></ng-container>
      <ng-template #active>
        <button mat-icon-button>
          <mat-icon svgIcon="trash" (click)="delete(element)"></mat-icon>
        </button>
      </ng-template>
      <ng-template #notActive>
        <button mat-icon-button disabled>
          <mat-icon svgIcon="trash"></mat-icon>
        </button>
      </ng-template>
    </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<ng-container *ngIf="(data.length < 1 || (data.length <= 1 && searchText == '')) && createMessage && !isLoading">
  <div class="create-new-message">
    <mat-icon svgIcon="info_new" inline="true"></mat-icon>
    <p class="mat-caption">{{ message }}</p>
  </div>
</ng-container>
